<template>
  <view class="page">
    <view class="casing" @click="goDetail">
      <image class="img" :src="items.image" mode="scaleToFill" />
      <view class="txt text-container"> {{ items.name }}</view>
      <view class="tips"
        >{{
          Math.floor(items.sales) + Math.floor(items.ficti) || 0
        }}人抢购</view
      >
      <view class="footer">
        <view class="contain">
          <view class="discount">¥{{ items.price }}</view>
          <view class="amount">¥{{ items.otPrice }}</view></view
        >
        <image
          src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/clickIcones.png"
          class="btn"
          mode="scaleToFill"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      btnImg: "",
      mt: '0',
      id: null
    };
  },
  props: {
    items: {
      type: Object,
      defult: {},
    },
  },
  onLoad(options) {},
  onShow() {},
  // 滚动监听
  onPageScroll(e) {},
  methods: {
    //to商品详情
    goDetail() {
      this.id = this.items.id
      // this.systemBinding()
      uni.navigateTo({
        url: `/pages/goods/goods_details/index?id=${this.items.id}&mt=0`,
      });
    },
  },
  mounted() {},
  onReachBottom() {
    // this.$refs.recommendIndex.get_host_product();
  },
};
</script>
<style lang="scss" scoped>
.page {
  break-inside: avoid; /* 防止内容被分割到不同列 */
  background-color: #f0f0f0;
  margin-bottom: 17.44rpx; /* 行间距 */
  //   padding: 40rpx;
  box-sizing: border-box;
}
.casing {
  position: relative;
  z-index: 3;
  background: #fff;
  border-radius: 19.19rpx;
  z-index: 10;
  .img {
    border-top-left-radius: 19.19rpx;
    border-top-right-radius: 19.19rpx;
    width: 350.58rpx;
    height: 340.12rpx;
  }
  .txt {
    padding: 0rpx 12rpx;
    margin-top: 19.19rpx;
    font-size: 27.91rpx;
    color: #000000;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
  }
  .tips {
    padding: 0rpx 12rpx;
    font-size: 21rpx;
    color: #8f8f91;
    margin-top: 10.47rpx;
  }
  .footer {
    margin-top: 46rpx;
    padding: 0rpx 20rpx 20rpx 20rpx;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    .discount {
      font-weight: 500;
      font-size: 35rpx;
      color: #eb3f3a;
    }
    .amount {
      font-weight: 400;
      font-size: 21rpx;
      color: #8f8f91;
      text-decoration: line-through;
      margin-left: 6.98rpx;
    }
    .btn {
      width: 60rpx;
      height: 60rpx;
      background: #11cc7b;
      border-radius: 20rpx;
    }
  }
}
.contain {
  display: flex;
  align-items: center;
}
.text-container {
  display: -webkit-box; /* 将元素设置为弹性盒子 */
  -webkit-box-orient: vertical; /* 设置内容垂直排列 */
  -webkit-line-clamp: 2; /* 限制显示的行数 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  line-height: 1.5; /* 行高 */
  max-height: 3em; /* 最大高度（行高 × 行数） */
}
</style>
